<!--
 * @Author: 可以清心
 * @Description: 
 * @Date: 2023-05-19 17:02:19
 * @LastEditTime: 2023-05-21 17:11:53
-->
<template>
    <div class="item">
        <div class="header">
            <span class="title">{{ item.title }}</span>
        </div>
        <ul>
            <li v-for="info in list"><span class="text">{{ info }}</span></li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'Card',
        props: {
            item: {
                type: Object,
                required: true
            },
            width: {
                type: Number,
                required: true
            }
        },
        computed: {
            list(){
                // 2rem 20px 1个字20px
                const list = this.item.list;
                const width = this.width;
                let result = [];

                if(list && list.length){
                    list.forEach(item => {
                        // 一行的字数
                        let line = Math.ceil(width / 20);

                        new Array(Math.ceil(item.length / line)).fill(0).forEach((fill, index) => {
                            result.push(item.substring(index * line, index * line + line));
                        })
                    })
                }

                return result;
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "./index";
</style>